<template>
  <a-form
    :model="formState"
    @finish="handleFinish"
    @finishFailed="handleFinishFailed"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-item>
      <a-input v-model:value="formState.user" placeholder="请输入手机号">
        <template #prefix
          ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
        /></template>
      </a-input>
    </a-form-item>

    <a-form-item>
      <a-input
        type="text"
        style="width: 100px"
        v-model:value="formState.messagePwd"
      />
      <a-button type="link" style="margin-left: 10px" @click="numRandom"
        >获取验证码</a-button
      >
    </a-form-item>

    <a-form-item>
      <a-input
        v-model:value="formState.password"
        type="password"
        placeholder="请设置密码"
      >
        <template #prefix
          ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
        /></template>
      </a-input>
    </a-form-item>

    <a-form-item>
      <a-input
        v-model:value="formState.passwordt"
        type="password"
        placeholder="请再次输入密码"
      >
        <template #prefix
          ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
        /></template>
      </a-input>
    </a-form-item>

    <a-form-item :wrapper-col="{ span: 12, offset: 10 }">
      <a-button
        type="primary"
        html-type="submit"
        :disabled="
          formState.user === '' ||
          formState.password === '' ||
          formState.passwordt === ''
        "
      >
        注册
      </a-button>
    </a-form-item>
  </a-form>
</template>
t
<script>
import { defineComponent, reactive } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import VueEvent from "../../utils/event";
import { useStore } from "vuex";
import { doregister } from "../../api/user";
import io from "../../utils/socket";

export default defineComponent({
  setup() {
    const store = useStore();
    const formState = reactive({
      user: "",
      password: "",
      passwordt: "",
      messagePwd: "",
    });

    let num = "";
    const numRandom = () => {
      num = "";
      for (let i = 0; i < 6; i++) {
        num += Math.floor(Math.random() * 10);
      }
      message.info(num);
    };

    const handleFinish = () => {
      if (formState.messagePwd != num) {
        message.info("验证码错误！");
      } else if (formState.password != formState.passwordt) {
        message.info("两次密码输入不一致！");
      } else {
        doregister({
          url: "/login/doregister",
          username: formState.user,
          password: formState.password,
          success: (res) => {
            // console.log(res.data);
            if (res.data.data == "success") {
              store.dispatch("setUser", true);
              sessionStorage.setItem("Flag", "loginType");
              sessionStorage.setItem("imgUrl", res.data.img_head);
              VueEvent.emit("login");
              io.emit("login", { uid: res.data.uid });
              message.info("注册成功！自动为您登录！");
            } else {
              message.info(res.data);
            }
          },
          err: (err) => {
            console.log(err);
          },
        });
      }
    };

    const handleFinishFailed = (errors) => {
      console.log(errors);
    };

    return {
      formState,
      handleFinish,
      handleFinishFailed,
      labelCol: {
        span: 12,
      },
      wrapperCol: {
        span: 16,
        offset: 4,
      },
      numRandom,
    };
  },

  components: {
    UserOutlined,
    LockOutlined,
  },
});
</script>